<template>
    <div class="card">
        <div class="block">
            <div v-if="this.cardData.unit.length == 0" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_hight" :autoplay="false"  :initial-index="cardData.index">
                <el-carousel-item v-for="item in cardData.unit" :key="item.index">
                    <!-- 设备标题 -->
                    <router-link to="/overview">
                        <h4 class="normal" @click="router('temp',item)" :title="item.name">
                            <img class="title_icon" src="../../assets/title.png" alt />
                            {{item.typename}}:&nbsp;{{item.name}}
                        </h4>
                    </router-link>
                    <!-- {{item.unit}} -->
                    <!-- 卡片内容 -->
                    <!-- 表盘样式 -->
                    <div class="card_padding_chart">
                        <div class="temp_circle">
                            <div class="wave1"></div>
                            <p class="p1">{{item.unit[0].value.toFixed(1)}}<span class="p2">{{item.unit[0].flag}}</span></p>
                            <p>{{item.unit[0].name}}</p>
                            <p></p>
                        </div>
                        <div class="temp_circle">
                            <div class="wave2"></div>
                            <p class="p1">{{item.unit[1].value.toFixed(1)}}<span class="p2">{{item.unit[1].flag}}</span></p>
                            <p>{{item.unit[1].name}}</p>
                        </div>
                        <!-- <div :class="item.alarmt > 0 ? 'temp_circle_warning':'temp_circle'">
                            <div :class="item.alarmt > 0 ? 'wave_warning':'wave1'"></div>
                            <p class="p1">{{item.pj.temp.toFixed(1)}}<span class="p2">{{item.unit[0].flag}}</span></p>
                            <p>{{item.unit[0].name}}</p>
                            <p></p>
                        </div>
                        <div :class="item.alarmh > 0 ? 'temp_circle_warning':'temp_circle'">
                            <div :class="item.alarmh > 0 ? 'wave_warning':'wave2'"></div>
                            <p class="p1">{{item.pj.humi.toFixed(1)}}<span class="p2">{{item.unit[1].flag}}</span></p>
                            <p>{{item.unit[1].name}}</p>
                        </div> -->
                    </div>
               </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    props: ['nowIndex','cardData', 'nowId'],
    data () {
        return{
            timergetCardData : '', //获取缓存中的数据 定时器

        }
    },
    created() {
        // this.getCardData();
        // // 从缓存获取数据定时器
        // this.timergetCardData = setInterval(() => {
        //     setTimeout(this.getCardData(), 0);
        // }, 5000);
    },
    methods: {
        getCardData () {
            // var list = JSON.parse(localStorage.getItem("getlist"));
            // var str = []
            // for(var i = 0; i < list.length; i++){
            //     if(this.nowIndex.backName == list[i].type){
            //         var num = 0
            //         for(var j = 0; j < list[i].devlink.length; j++){
            //             if(list[i].devlink[j].ready == 1){
            //                 var arr = {
            //                     type:list[i].type,
            //                     name:list[i].devlink[j].name,
            //                     addr:list[i].devlink[j].addr,
            //                     uid:list[i].devlink[j].uid,
            //                     index:num++,
            //                     unit:[]
            //                 }
            //                 str.push(arr)
            //             }
            //         }
            //         for(var a = 0; a < str.length; a++){
            //             if(str[a].uid == this.data.uid && str[a].addr == this.data.addr){
            //                 var params = {
            //                     "getdevinfo":[{
            //                         "uid":str[a].uid,
            //                         "type":str[a].type,
            //                         "addr":str[a].addr,
            //                         "unittype":"id-value-flag-min-max",
            //                         "unit":"0-1"
            //                     }],
            //                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            //                 }
            //                 this.$http.post(this.$baseUrl, params).then((res) => {
            //                     for(var b = 0; b < str.length; b++){
            //                         if(str[b].uid == res.data.getdevinfo[0].uid && str[b].addr == res.data.getdevinfo[0].addr){
            //                             this.order = str[b].index
            //                             str[b].unit = res.data.getdevinfo[0].unit
            //                             this.cardData = str
            //                             console.log(this.cardData)
            //                         }
            //                     }
            //                 })
            //             }
            //         }
                    
            //     }
            // } 
        },
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
    },
     // 清除定时器
    beforeDestroy() {
    },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.card_padding_chart{
    padding: 40px 20px;
    display: flex;
    align-items: center; 
    justify-content: space-around;
}
.temp_circle{
    width: 130px;
    height: 130px;
    padding: 10px;
    border-radius: 50%;
    /* box-shadow: 0px 0px 5px 4px #32b16c, 
                0px 0px 8px 4px #ffffff4f, 
                0px 0px 17px 12px #0168b7; */
    box-shadow: 0px 0px 5px 2px #32b16c, 
                0px 0px 8px 4px #ffffff4f, 
                0px 0px 20px 5px #0168b7;

    position: relative;
    text-align: center;
    overflow: hidden;
    animation: water-wave linear infinite;
}
.temp_circle_warning{
    width: 130px;
    height: 130px;
    padding: 10px;
    border-radius: 50%;
    /* box-shadow: 0px 0px 5px 4px #32b16c, 
                0px 0px 8px 4px #ffffff4f, 
                0px 0px 17px 12px #0168b7; */
    box-shadow: 0px 0px 5px 2px #c03617de, 
                0px 0px 8px 4px #ffffff4f, 
                0px 0px 20px 5px #0168b7;

    position: relative;
    text-align: center;
    overflow: hidden;
    animation: water-wave linear infinite;
}
.wave1::before,
.wave1::after {
      content: '';
      position: absolute;
      top: 160px;
      left: 50%;
      width: 130px;
      height: 130px;
      -webkit-transform: translate(-50%, -70%);
      transform: translate(-50%, -70%);
      background: linear-gradient(to bottom , rgba(255, 0, 0, 0), #32b16c 100%);
      z-index: 10;
}
.wave2::before,
.wave2::after {
      content: '';
      position: absolute;
      top: 160px;
      left: 50%;
      width: 130px;
      height: 130px;
      -webkit-transform: translate(-50%, -70%);
      transform: translate(-50%, -70%);
      background: linear-gradient(to bottom , rgba(255, 0, 0, 0), #0168b7 100%);
      z-index: 10;
}
.wave_warning::before,
.wave_warning::after {
    content: '';
    position: absolute;
    top: 160px;
    left: 50%;
    width: 130px;
    height: 130px;
    -webkit-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
    background:linear-gradient(to bottom , rgba(255, 0, 0, 0), #c03617 100%);
    z-index: 10;
}
.p1{
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: 12px;
}
.p2{
    font-size: 15px;
    color: #acacac;
    padding-left: 5px;
}
</style>